documentation
This is the first time that I have ever attempted to do a website from scratch on Dreamweaver cs6. The First step I took was to develop a system (see pic 1). What did I want the website to look like, do and contain. I decided to make it as simple as possible as this was my very first attempt and I didn’t know anything about html or its language.
I started off with a whole bunch of templates so that I could modify it to what I wanted buy soon realized that by deleting margins, icons, paragraphs I ended off with what I wanted my website to look like and how I wanted it to function but ended off with a whole lot of hidden “useless” code.
This made me realize that it would probably be easier to start from scratch. So I started by watching the Joshua Kywn tutorial on YouTube (https://www.youtube.com/watch?v=lnB9ArvVPXU&list=PLwglS51ddbZEPeURdjLDqFZ4saPGd5EiL) and began to build my website from scratch and learning the basics of the html language.
website architecture
See Image 1
Index Page
Head: Title- Bjorn Fabacademy journal
Body (I wanted to keep it really simple so I only added a few components to the site, no banners etc.)
- Logo
- Social Media (link to FabLab Namibia Facebook page and Bjorn Wiedow Linked in Page)
- Navigation (Home, Contact for the Home page and Home, Contact, Forward and Back for the Project Pages)
- About me
- Content ( will be custom designed icons with links to the Project Pages)
No Side bars so I can keep the site really simple and clean.
Project Page
- The Icon for the project will be the heading for each project page.
- I will have space for Documentation, Code, Images and other.
- Documentation- Here I will be describing in righting how I went about things and the issues I occurred and solved and how I did this
- Code- The raw code of my work
- Images- I will take photos, make images and drawings of my work before during and after the completion of the specified project.
- Other- Any other information that may be required.
Contact Page
- I will add a photo of myself and the e-mail address of how to contact me.
code
The Main codes that I have learnt so far by doing tutorials and getting help from my friends and colleagues. All Code that opens and Closes is in RED.
Creating Containers: <div class="container1">
and then Closing the Container </div>
-
Here I cant seem to make it RED??
Changing the Name on the Tab/Title in my website viewer: <title>Bjorns Fabacademy jurnal</title>
Adding my style sheet:<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css">
Creating Headings: <h2 align="center">website architecture</h2> It can be done with h1= Heading 1/h2=Heading 2 etc.
Creating a area for Code that will not influence my websites code: <p><code> Type your Code here </code><br/>
Creating Paragraphs for wrighting: <p>Type your text here</p>
Creating a List (there are two types of ordered lists- numered list (ol) is and a bullet point list is a unordered list (ul)
<ul></p><br /> THIS OPENS THE LIST (I MADE MY LIST WITH PICTURES ONLY
<li><a href="principles and practices, project management.html"><img src="IMMAGE NAME AND DETAILS HERE" width="388" height="41"></a></li><br />
<li><a href="computer aided design.html"><img src="images/Illustrations/computer-aided-design.gif"></a></li><br />
ETC.
Headder/Footer/Body etc (You will need these for your css file or style sheet: <head> </head> <body> </body> <footer> </footer> ETC.
To create active Links to Wbsites outside:
(<a href="https://www.youtube.com/watch?v=lnB9ArvVPXU&list=PLwglS51ddbZEPeURdjLDqFZ4saPGd5EiL">
For the css styles, it has to be linked to your pages and the containers or areas that you have made will be updated with you fonts, colors etc to make all the different pages of the websites coherent to one another. My css code looks like this:
h1 {
color: #666666;
font-style: normal;
font-size: xx-large;
font-family: monospace;
text-align: center;
text-decoration: blink;
}
.container {
height: 100%;
width: 1200px;
border: thin none #666;
vertical-align: centre;
background-position: center center;
margin: 20px;
padding: 20px;
left: auto;
top: auto;
right: auto;
bottom: auto;
position: relative;
}
ETC.
